<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="utf-8">
	<title>学生身心辅助管理</title>
    <!--设置是否为缩放模式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
	<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="static/css/visual.css">
	<link rel="stylesheet" type="text/css" href="static/css/liMarquee.css">
	<link rel="stylesheet" type="text/css" href="static/css/swiper.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.js"></script>
    <script src="static/js/echarts.min.js"></script>
    <script src="static/js/swiper.min.js"></script>
	<script src="static/js/jquery.liMarquee.js"></script>
	<script src="static/js/option.js"></script>
	<style>
		/* 自定义分页器 */
		.swiper-pagination {
			position: absolute;
			text-align: center;
			-webkit-transition: .3s opacity;
			-o-transition: .3s opacity;
			transition: .3s opacity;
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			z-index: 10;
			text-align: center;
			margin: 0 auto;
			margin: 0 4px;
		}
		/* 分页器的大小 */
		.swiper-pagination-bullet {
			width: 10px;
			height: 10px;
			display: inline-block;
			background: #ffffff;
			border-radius: 50%;
			margin: 0 8px;
		}
		/* 颜色 */
		.swiper-pagination-bullet-active {
			opacity: 1;
			background: #f1d88b;
			width: 40px;
			border-radius: 10px;
		}

	</style>

</head>
<body class="ksh">
	<div id="load">
		<div class="load_img"><!-- 加载动画 -->
			<img class="jzxz1" src="static/images/jzxz1.png">
			<img class="jzxz2" src="static/images/jzxz2.png">
		</div>
	</div>
	<div class="header">
		<div class="bg_header">
			<div class="header_nav fl t_title">
				学生身心辅助管理
				<div class="time" id="showTime" >2018-6-12 17:00:12</div>
			</div>
			<div style="right: 20px;top:10px;z-index: 99;position: fixed;display: flex">
				<div>
					<div style="width: 220px;opacity:0" class="selectSpan">
						<select class="selectpicker" id="selectSf" data-hide-disabled="true" data-size="5" data-live-search="true" title="检索学生信息"></select>
					</div>
				</div>
				<div>
					<a id="searchA">
						<button class="btn btn-default" type="button" id="searchBtn">查找</button>
					</a>
				</div>
				<div>
					<div>
						<span>
							<a th:href="@{/history}" class="btn_history "><button class="btn btn-primary disabled" >历史记录</button></a>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="visual">
		<div class="visual_left">
			<div class="visual_box" style="height: 30%">
				<div class="visual_title">
					<span>各学院预警人数</span>
					<img src="static/images/ksh33.png">
				</div>
				<div class="swiper-container visual_swiper2 visual_chart">
					<div class="swiper-wrapper">
						<div class="swiper-slide"  id="main_college1"></div>
<!--						<div class="swiper-slide"  id="main_college1"></div>-->
					</div>
				</div>
			</div>
			<div class="visual_box" style="height: 70%">
				<div class="visual_title">
					<span>数据分布</span>
					<img src="static/images/ksh33.png">
				</div>
				<div class="swiper-container visual_swiper_prop visual_chart">
					<div class="swiper-wrapper">
						<div class="swiper-slide" id="main_prop1"></div>
						<div class="swiper-slide" id="main_prop2"></div>
						<div class="swiper-slide" id="main_prop3"></div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination" style="position: fixed;padding-bottom: 20px;width: 20%"></div>
				</div>
			</div>
		</div>
		<div class="visual_con">
			<div class="visual_conBot">
				<div class="visual_chart" id="main_radar"></div>
				<div class="visual_conBot_bot">
					<div class="visual_chart" id="main_trend" style="height: 100%"></div>
				</div>
			</div>
		</div>
		<div class="visual_right">
			<div class="visual_box">
				<div class="visual_title">
					<span>预警及干预情况</span>
					<img src="static/images/ksh33.png">
				</div>
				<div class="visual_chart">
					<div class="staticlist">
						<ul class="clearfix">
							<li>
								<div class="static" id="studentNum"></div>
								<span>学生总数</span></li>
							<li>
								<div class="static" id="warningStudentNum"></div>
								<span>预警人数</span></li>
							<li>
								<div class="static" id="warningRate"></div>
								<span>预警率</span></li>
							<li>
								<div class="static" id="interveneRate"></div>
								<span>干预率</span></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="visual_box visualSfzsfl" style="height: 60%">
				<div class="visual_title">
					<span>预警学生信息表</span>
					<img src="static/images/ksh33.png">
				</div>
				<div class="visual_table">
					<div class="table">
						<div class="th">
							<span style="width: 13%">姓名</span>
							<span style="width: 25%">学号</span>
							<span style="width: 37%">学院</span>
							<span style="width: 25%">预警详情</span>
						</div>
						<div class="visual_body" style=" height:500px">
							<ul class="tableul">
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="alert">
		<!--    <a href="#" class="close" data-dismiss="alert">&times;</a>-->
		<span class="alertText"></span>
	</div>
</body>
<script>
	$(function(){
		var sfzcllH=$('.sfzcll_box').height()
		var sfzcllHtwo=sfzcllH-2
		$('.sfzcll_box').css('line-height',sfzcllH+'px')
		$('.sfzcll_smallBk>div').css('line-height',sfzcllHtwo+'px')

		//删除加载动画
		$('#load').fadeOut(100)
		setTimeout(function(){$('#load').remove()},110);
	})
	window.onload = function (){
		//各学院预警人数
		warningFaculty()
		//年纪比例
		gradePie()
		//专业比例
		facultyPie()
		//性别比例
		sexPie()
		$(function(){
			var mySwiper_prop = new Swiper('.visual_swiper_prop', {
				autoplay: true,//可选选项，自动滑动
				direction : 'horizontal',//可选选项，滑动方向
				speed:2000,//可选选项，滑动速度
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				}
			})
		});
		//趋势折线图
		warningTrend()
		//预警情况
		studentNum()
		//预警学生信息表
		warningStudent()
		//雷达图
		radarLoad()

	}
	function warningFaculty(){
		//各学院预警人数
		$.ajax({
			url:'/tbIndicators/warningFaculty',
			type: 'GET',
			contentType:"application/json",
			async:false,
			success:function (data){
				for(let item in data){
					warnFacuKey.push(data[item].name)
				}
				warnFacuData = data
			}
		})
		//各学院预警人数
		var myChart_college1 = echarts.init(document.getElementById('main_college1'));
		option_college1.series[0].data = warnFacuData
		myChart_college1.setOption(option_college1);
	}
	function gradePie(){
		//年纪比例
		$.ajax({
			url:'/tbStudent/grade',
			type: 'GET',
			contentType:"application/json",
			async:false,
			success:function (data){
				for(let item in data){
					gradeKey.push(data[item].name)
				}
				gradeData = data

			}
		})
		//	年级分布
		var myChart_prop1 = echarts.init(document.getElementById('main_prop1'));
		option_prop1.legend.data = gradeKey
		option_prop1.series[0].data = gradeData
		myChart_prop1.setOption(option_prop1);
	}
	function facultyPie(){
		//专业比例
		$.ajax({
			url:'/tbStudent/faculty',
			type: 'GET',
			contentType:"application/json",
			async:false,
			success:function (data){
				facultyData = data
				for(let item in data){
					facultyKey.push(data[item].name)
				}
			}
		})
		var myChart_prop2 = echarts.init(document.getElementById('main_prop2'));
		option_prop2.legend.data = facultyData
		option_prop2.series[0].data = facultyData
		myChart_prop2.setOption(option_prop2);
	}
	function sexPie(){
		//性别比例
		$.ajax({
			url:'/tbStudent/sex',
			type: 'GET',
			contentType:"application/json",
			async:false,
			success:function (data){
				sexData = data
			}
		})
		option_prop3.series[0].data = sexData
		var myChart_prop3 = echarts.init(document.getElementById('main_prop3'));
		myChart_prop3.setOption(option_prop3);
	}
	function warningTrend(){
		//趋势折线图
		$.ajax({
			url:'/tbIndicators/warningGrade',
			type: 'GET',
			contentType:"application/json",
			async:false,
			success:function (data){
				warningData = data
				for(let item in data){
					warningKey.push(data[item].name)
					warningValue.push(data[item].value)
				}
			}
		})
		//	趋势折线图
		var myChart_trend = echarts.init(document.getElementById('main_trend'));
		myChart_trend.setOption(option_trend);
	}
	function studentNum(){
		//预警情况
		var indicatorData = {}
		$.ajax({
			url:'/tbIndicators/studentNum',
			type: 'GET',
			contentType:"application/json",
			async:false,
			success:function (data){
				indicatorData = data
				$('#studentNum').html(indicatorData.studentNum)
				$('#interveneRate').html((indicatorData.interveneRate * 100).toFixed(2) + '%')
				$('#warningRate').html((indicatorData.warningRate*100).toFixed(2) + '%')
				$('#warningStudentNum').html(indicatorData.warningStudentNum)
			}
		})
	}
	function warningStudent(){
		//预警学生信息表
		$.ajax({
			url:'/tbIndicators/warningStudent',
			type: 'GET',
			contentType:"application/json",
			async:false,
			success:function (data){
				console.log(data.length)
				for(let item in data){
					var html = '<li>\n' +
							'\t\t\t\t\t\t\t\t\t<span class="text-name">'+data[item].name+'</span>\n' +
							'\t\t\t\t\t\t\t\t\t<span class="text-w">'+data[item].id+'</span>\n' +
							'\t\t\t\t\t\t\t\t\t<span class="text-b">'+data[item].faculty+'</span>\n' +
							'\t\t\t\t\t\t\t\t\t<span class="text-d" data-toggle="tooltip" data-placement="auto bottom" title="'+data[item].text+'">'+data[item].text+'</span>\n' +
							'\t\t\t\t\t\t\t\t</li>'
					$('.tableul').append(html)
				}
			}
		})
		$(function(){
			$('.visual_body').liMarquee({
				direction: 'up',
				scrollamount: 30,
				runshort: false
			});
		});
		$(function () { $("[data-toggle='tooltip']").tooltip(); });
	}
	function radarLoad(){
		// 六大指标雷达图
		$.ajax({
			url:'/tbIndicators/average',
			type: 'GET',
			contentType:"application/json",
			async:false,
			success:function (data){
				radarData = Object.values(data)
			}
		})
		var sum = 0, max = radarData[0]*10;
		radarData.forEach(item => {
			item = item*10
			sum += item
			if(item >= max) max = item
		})
		var number = Math.round(max * 0.5)
		for(var item in radarData){
			showData.push((number + radarData[item]).toFixed(2))
		}
		option_radar.series[0].data[0].value = showData
		var myChart_radar = echarts.init(document.getElementById('main_radar'));
		myChart_radar.setOption(option_radar);
	}

</script>
<script type="text/javascript">
<!--	定时器-->
	var t = null;
	t = setTimeout(time,1000);//開始运行
	function time()
	{
		clearTimeout(t);//清除定时器
		dt = new Date();
		var y=dt.getFullYear();
		var mt=dt.getMonth()+1;
		var day=dt.getDate();
		var h=dt.getHours();//获取时
		var m=dt.getMinutes();//获取分
		var s=dt.getSeconds();//获取秒
		document.getElementById("showTime").innerHTML = y+"-"+mt+"-"+day+" "+h+":"+m+":"+s+"";
		t = setTimeout(time,1000); //设定定时器，循环运行
	}
</script>
<script type="text/javascript">
<!--	操作栏-->
	var href = "/personal?student=";
	$('#searchA').on("click", function () {
		var inputInfo = $(".selectpicker").val()
		if(!inputInfo){
			$('.alert').addClass('alert-warning')
			$('.alertText')[0].innerText = '请输入学生信息'
			setTimeout(function(){
				$('.alert').removeClass('alert-warning')
				$('.alertText')[0].innerHTML = ''
			},1500);

		}else {
			$(this).attr('href',href + inputInfo)
		}

	});
	var displayFlag = false;
	$('#searchBtn').on("mouseenter", function () {
		if(!displayFlag){
			$(".selectSpan")[0].style.cssText='opacity:100%;'
			displayFlag = true
		}else {
			// $(".selectSpan")[0].style.cssText='opacity:0%;'
			// displayFlag = false
		}
	});
	$(function () {
		$('.selectpicker').selectpicker('refresh');
		$('.selectpicker').selectpicker('render');
	})
	//下拉框数据加载
	$.ajax({
		url:'/tbStudent/findAll',
		type: 'GET',
		contentType:"application/json",
		async:false,
		success:function (data){
			for (let item in data){
				var studentLi = data[item].id + '-' + data[item].name + '-' + data[item].faculty
				var html = '<option value=\''+data[item].id+'\'>'+studentLi+'</option>'
				$(".selectpicker").append(html);
			}
		}
	})
</script>
</html>
